<template>
  <section class="content">
	   <el-col :span="24" style="padding-bottom: 0px;">
			<el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="测斜" name="first">
          	<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
              <el-form :inline="true" >
                <el-form-item>
                    结构物:
                    <el-select v-model="worksk" clearable placeholder="请选择" @change="selectKey">
                      <el-option v-for="item in works" :key="item.id"  :label="item.name"  :value="item.id">
                      </el-option>
                    </el-select>
                    日期:			
                  <el-date-picker  v-model="timeFirst" type="month" placeholder="选择日期"   size='small'  value-format="yyyy-M" format="yyyy 年 M 月" >
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="inquire">查询</el-button>
                  <el-button type="primary" @click="exportExcel">导出</el-button>
                </el-form-item>
              </el-form>
	    </el-col>
        <el-col :span="24" class="tabledata">
          <h1 style="text-align: center">暂时展示沉降数据（测斜月报表）</h1>
          <h4>项目名称：{{table1.projectName}}</h4>
          <h4>项目负责人：{{table1.projectLeader}}</h4>
         </el-col>
         <el-table id="out-table"  :data="data_list1"  border height="600" :span-method="objectSpanMethod"
         v-loading="pictLoading"  element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"    element-loading-text="正在生成报表请等待..."
         class="table">
              <el-table-column  :label="head" v-for="(head, key) in header" :key="head">
                  <template slot-scope="scope">
                    {{data_list1[scope.$index][key]}}
                  </template>
              </el-table-column>
          </el-table>
        
        </el-tab-pane>
          <el-tab-pane label="地面沉降" name="two">
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
              <el-form :inline="true" >
                <el-form-item>
                    结构物:<el-select v-model="worksk1" clearable placeholder="请选择" @change="selectKey1">
                                <el-option v-for="item in works1" :key="item.id" :label="item.name"  :value="item.id">
                                </el-option>
                            </el-select>
                 日期:			
                  <el-date-picker  v-model="timeFirst1" type="month" placeholder="选择日期"   size='small'  value-format="yyyy-M" format="yyyy 年 M 月" >
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="inquire1">查询</el-button>
                  <el-button type="primary" @click="exportExcel">导出</el-button>
                </el-form-item>
              </el-form>
	    </el-col>
        <el-col :span="24" class="tabledata">
          <h1 style="text-align: center">地表沉降月报表</h1>
          <h4>项目名称：{{table11.projectName}}</h4>
          <h4>项目负责人：{{table11.projectLeader}}</h4>
        </el-col>
           <el-table 
            id="out-table1"
            :data="data_list"
            :span-method="SpanMethod"
            height="600"
            border
            class="table"
             v-loading="pictLoading1" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"    element-loading-text="正在生成报表请等待..."
            >
              <el-table-column  :label="head" v-for="(head, key) in header1" :key="head" >
                <template slot-scope="scope">
                {{data_list[scope.$index][key]}}
                 </template>
              </el-table-column>
          </el-table> 
      
         
          </el-tab-pane>
			</el-tabs>

	   </el-col>
  </section>
</template>
<style scoped>
.content {
  padding-top: 20px;
  background-color: #ffffff;
  height: 100%;
}
.table {
  margin-top: 10px;
  margin-left: 10px;
  width: auto;
  margin-right: 10px;
}
</style>
<script>
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
  data() {
    return {
      projectId:'',
      worksTitle: "结构物",
      contentTitle: "监测内容",
      activeName: "first",
      works: [],
      works1: [],
      worksk: '',
      worksk1: '',
      nowTime: "",
      table1:{
        date:'',
      },
      table11:{
        date:'',
      },
      timeFirst:'2018-6',
      timeFirst1:'2018-6',
      key: "",
      header:[],
      header1:[],
      data_list:[],
      spanArr:[],
      spanArr1:[],
      data_list1:[],
      pictLoading:false,
      pictLoading1:false,
    };
  },
  methods: {
    handleClick(){},
     selectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.works.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },
     selectKey1(id) {
      this.id = id;
      let obj = {};
      obj = this.works1.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },
    //测斜月报
    inquire() {
      this.pictLoading=true;
      let data = {
        groupId: this.worksk,
        date: this.timeFirst,
        monitorTypeId: 8
      }
      this.projectModel.reportMonth(data).then(res => {
        console.log(res)
        this.table1 = res.data
        this.header = res.data.fieldNames;
        this.data_list1 =res.data.items
        this.spanArr = []
        this.getSpanArr(this.data_list1)
      }).catch(err =>　{
        console.log(err.massage)
      })
    },
     getSpanArr(data) {
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0
            } else {
              // 判断当前元素与上一个元素是否相同
            if (data[i][0] === data[i - 1][0]) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            }
        }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            this.pictLoading = false;
            return {
                  rowspan: _row,
                  colspan: _col
            }
          }
      },

    //沉降月报
     inquire1() {
      this.pictLoading1=true;
      let data = {
        groupId: this.worksk,
        date: this.timeFirst1,
        monitorTypeId: 8
      }
      this.projectModel.reportMonth(data).then(res => {
        this.table11 = res.data
        this.header1 = res.data.fieldNames
        this.data_list = res.data.items
        this.spanArr1 = []
        this.getSpanArr1(this.data_list)
      }).catch(err =>　{
        console.log(err.massage)
      })
    },
     getSpanArr1(data) {
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr1.push(1);
              this.pos1 = 0
            } else {
              // 判断当前元素与上一个元素是否相同
            if (data[i][0] === data[i - 1][0]) {
                this.spanArr1[this.pos1] += 1;
                this.spanArr1.push(0);
              } else {
                this.spanArr1.push(1);
                this.pos1 = i;
              }
            }
        }
    },
    SpanMethod({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 0) {
            const _row = this.spanArr1[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            this.pictLoading1 = false
            return {
                  rowspan: _row,
                  colspan: _col
            }
          }
      },
     //导出测斜
    exportExcel () {
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '<'+this.table1.projectName+'>('+this.table1.projectLeader+')'+this.table1.date+'测斜月报表'+'.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },
     //导出沉降
    exportExcel1 () {
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table1'))
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '<'+this.table11.projectName+'>('+this.table11.projectLeader+')'+this.table11.date+'地表沉降月报表'+'.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },
  },
  mounted() {
    this.projectId = this.$route.query.projectId;
    this.inquire();
    this.inquire1();
    this.projectModel.fromPorjidGet(this.projectId).then(res => {
      this.works = res.data
      this.works1 = res.data
    }).catch(err =>　{
      console.log(err.massage)
    })
  }
  
};
</script>
<style>
.table {
  margin-top: 10px;
  margin-left: 10px;
  width: auto;
  margin-right: 10px;
}
.tabledata{
  padding-right: 10px;
  padding-left: 10px;
}
/* .thtd th, .el-table td{
  border-right: 1px solid #ebeef5;
}
.el-table {
      padding-left: 10px;
} */
.table-head{padding-right:17px}
.table-body{width:100%; height:600px;overflow-y:scroll;}
.table-head table,.table-body table{width:100%; border: 1px solid #ebeef5;}
.table-body table tr{border: 1px solid #ebeef5;height: 50px;}
.table-body table tr td{border-right: 1px solid #ebeef5;}
</style>

